<template>
    <div class="cls1" ref="chartSC"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, useTemplateRef, ref } from 'vue';
  import request from '../axios/request'
  
  const chartSC = ref()
  //不同年份的需求量
  function chartsInit(data) {
      var x = [];
      var y= [];
      
      for (var i = 0; i < data.length; i++) {
          x.push(data[i].star);
          y.push(data[i].total_consume_count);
      }
      var myChart = echarts.init(chartSC.value, 'Light');
      var option;
     
      option = {
        title: {
  text: '民宿星级数量分布',
  textStyle: {
    color: '#1784DB',
    fontSize: 20,
    textAlign: 'center'
  },
  left: 'center',
  bottom: '5%'
},

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: x
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: y,
      type: 'line',
      areaStyle: {}
    }
  ]
};

      option && myChart.setOption(option);
  }
  
  //组件挂载成功
  onMounted(function () {
      //发起axios异步请求，获取数据
      request({
          url: '/minsu-api/queryAllratnum',  // 配置的代理请求会拦截
          method: 'get'
      }).then(res => {

          chartsInit(res.data.data)
      }).catch((error) =>
          console.log(error))
  })
  
  </script>
  <style scoped>
  .cls1{
    width: 550px;
    height: 400px;
    transform: translateY(-30px);
  }
  </style>